<template>
  <div>
    <el-row>
      <el-badge
        v-for="(item, i) in buttonList"
        :key="i"
        :hidden="togger(i)"
        :value="i === 2 ? $store.state.cart.cartList.length : 0"
        class="item"
      >
        <el-button
          :type="item.type"
          :disabled="i === currIndex ? true : false"
          :icon="item.icon"
          @click="shopClick(i)"
        >{{ item.name }}</el-button>
      </el-badge>
    </el-row>
    <table-content :currIndex="currIndex"></table-content>
  </div>
</template>
Content
<script>
import { mapState, mapMutations } from "vuex";
import TableContent from "@/views/Table";
export default {
  components: {
    TableContent
  },
  data() {
    return {
      buttonList: [
        {
          name: "商品列表",
          type: "primary",
          icon: "el-icon-s-operation"
        },
        {
          name: "商品管理",
          type: "primary",
          icon: "el-icon-setting"
        },
        {
          name: "购物车",
          type: "primary",
          icon: "el-icon-shopping-cart-2"
        },
        {
          name: "轮播图跑起来",
          type: "primary",
          icon: "el-icon-refresh-left"
        }
      ],
      currIndex: 0
    };
  },
  methods: {
    shopClick(i) {
      this.currIndex = i;
    },
    togger(i) {
      let cartCount = this.$store.state.cart.cartList.length;
      if (cartCount == 0 || i != 2) {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-row {
  margin: 20px 20px;
  display: flex;
  justify-content: space-between;
}
</style>
